<template>
  <div style="width: 100%; height: 100%">
    <el-header class="el-header">
      <div class="header-back-container">
        <div class="el-page-header">
          <div class="el-page-header__left" @click="onBack">
            <i class="el-icon-back"></i>
            <div class="el-page-header__title">返回</div>
          </div>
          <div class="el-page-header__content">
            <div class="title-box">
              <div class="title">子任务</div>
            </div>
          </div>
        </div>
      </div>
    </el-header>
    <el-main style="height: calc(100% - 60px); overflow-y: auto">
      <el-header>
        <div class="header-search"></div>
        <div class="header-info">
          <div class="info-box">
            <div class="box-left">
              <div class="info-item">
                <span>主任务：</span>
                <span class="value">巡查测试任务</span>
              </div>
              <div class="info-item">
                <span>周期：</span>
                <span class="value">天</span>
              </div>
              <div class="info-item">
                <span>时间：</span>
                <span class="value">2025-04-12 至 永久有效</span>
              </div>
              <div class="info-item">
                <span>巡查员：</span>
                <span class="value">刘先生</span>
              </div>
            </div>
            <div class="box-right">
              <el-tag type="danger" size="small">已逾期</el-tag>
            </div>
          </div>
        </div>
      </el-header>
      <div style="height: 14px"></div>
    </el-main>
  </div>
</template>
<script>
import tableStyleMixin from "../mixins/table-style";
import { mapState } from "vuex";
export default {
  name: "",
  watch: {
    showDialog(val) {},
  },
  mixins: [tableStyleMixin],
  data() {
    return {
      showDialog: false,
    };
  },
  computed: {
    ...mapState(["user", "spacesManage"]),
  },
  methods: {
    onBack() {
      this.closeDialog();
    },
  },
};
</script>
<style scoped lang="less">
@import url("./fpdOperate.less");

.header-info {
  width: 100%;
  display: flex;
  justify-content: center;
  .info-box {
    width: 98%;
    display: flex;
    align-items: center;
    background: @primaryBgcolor2;
    box-sizing: border-box;
    padding: 10px 16px;
    justify-content: space-between;
    color: @primaryThemeTxtColor;
    .box-left {
      display: flex;
      align-items: center;
      .info-item {
        margin-right: 18px;
        .value {
          opacity: 0.6;
        }
      }
    }
  }
}
</style>
